<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人资料</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<script src="js/mui.min.js"></script>

		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/reg_style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/ljq.css" />
		<style>
			body {
				background: #eee;
			}
			
			.head1 {
				background: #fff!important;
			}
			
			form {
				background: #fff;
				position: relative;
			}
			
			form div {
				height: 0.44rem;
				line-height: 0.44rem;
				border-bottom: 1px solid #ccc;
				width: 95%;
				margin-left: 5%;
				font-size: 0.14rem;
			}
			
			form div em {
				float: left;
				color: #4D4D4D;
			}
			
			form div span {
				float: right;
				color: #808080;
				margin-right: 0.12rem;
				background: url(img/xiangyou.png)no-repeat center right;
				background-size: 0.1rem;
				padding-right: 24px;
			}
			
			form a {
				display: block;
				height: 0.44rem;
				line-height: 0.44rem;
				border-bottom: 1px solid #ccc;
				width: 95%;
				margin-left: 5%;
				padding: 0;
				font-size: 0.14rem;
			}
			
			form a em {
				color: #4D4D4D;
			}
			
			form a span {
				float: right;
				margin-right: 0.12rem;
				background: url(img/xiangyou.png)no-repeat center right;
				background-size: 0.1rem;
				padding-right: 24px;
				color: #808080;
			}
			
			form div img {
				display: block;
				width: 0.3rem;
				height: 0.3rem;
				border-radius: 50%;
				margin-top: 0.07rem;
			}
			
			input {
				opacity: 0;
				display: block;
				width: 100%;
				height: 0.44rem;
				position: absolute;
				left: 0;
			}
		</style>
		<script type="text/javascript">
			mui.init();
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav head1">
			<em class="mui-action-back-no" id="mui-action-back-no" onclick="javascript:window.location.href='index.html'"><img class="img1" src="img/fanhui.png" alt="" /></em>
			<div class="div1"><span class="span0" id="list-shop-lists" onclick="user_select_shop();">个人资料</span></div>
			<input id="index-shop-lists-id" type="hidden">
			<input id="index-shop-lists" type="hidden">
		</header>
		<div class="mui-content">
			<form id="uploadForm" name="uploadForm" enctype="multipart/form-data">
				<div class="user">
					<em>用户ID</em>
					<span id='mine-id' style="background-image: none;"></span>
				</div>
				<div class="mui-input-row">
					<em>我的头像</em>
					<span>
						<input  value="上传头像" onchange="uploadFile(this);" name="avatar" id="avatar" type="file" class="opera-camera" accept="image/*" multiple>
						<img id='mine-logo' src="" alt="" />
					</span>
				</div>
				<a href="me_updatenickname.html" style="width: 100%;margin-left: 0;border-bottom: 5px solid #eee;">
					<em style="margin-left: 5%;">昵称</em>
					<span id='mine-name'></span>
				</a>

				<input id="id" name="id" type="hidden">
				<input id="token" name="token" type="hidden">
				<input id="client" name="client" type="hidden">
				<input id="version" name="version" type="hidden">
				<input id="params" name="params" type="hidden">
				<input id="sign" name="sign" type="hidden">

				<a href="me_updatepassword.html" style="border-bottom: none;">
					<em>修改密码</em>
					<span>&nbsp;</span>
				</a>
			</form>
		</div>

		<!--/********************日期控件**************************/-->
		<!--<link rel="stylesheet" type="text/css" href="css/hgs-date.css" />
		<script src="js/hgs-date.js"></script>-->
		<!--/********************日期控件**************************/-->
		<input id="index-shop-lists-id" type="hidden">
		<input id="index-shop-lists" type="hidden">
		<input id='index-end-date' type="hidden" />
		<input id='index-start-date' type="hidden" />

		<!--/***************************************************/-->

		<!--<script type="text/javascript" src="js/jsencrypt.js"></script>
			<script src="js/md5.js"></script>-->
		<script src="js/crypto-js.js"></script>
		<script src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/common.js?ver=20180123"></script>
		<script type="text/javascript" src="js/fuction.js?ver=20180123"></script>
		<script>
			mui.ready(function() {
				//获取当前的客户数据
				xminereadyload();

				//获取当前的客户数据
				mine_info(); //--------------------------------------------------->>>>>>>其他页面可以不要					

				mui("#mine-id")[0].innerHTML = user_info.id;
				mui("#mine-logo")[0].src = user_info.avatar;
				mui("#mine-name")[0].innerHTML = user_info.real_name;

			});

			//获取客户信息
			function mine_info() {
				//获取当前的客户数据
				var xbx = {};
				//登录后的参数对象AES加密
				official_login_after(url_host + 'mine/info', xbx, 'mine_info');
			};

			/* 
			 * 图片压缩
			 * img    原始图片
			 * width   压缩后的宽度
			 * height  压缩后的高度
			 * ratio   压缩比率 
			 */
			function compress(img, width, height, ratio) {
				var canvas, ctx, img64;

				canvas = document.createElement('canvas');
				canvas.width = width;
				canvas.height = height;

				ctx = canvas.getContext("2d");
				ctx.drawImage(img, 0, 0, width, height);

				img64 = canvas.toDataURL("image/jpeg", ratio);

				return img64;
			}

			//获取我的信息-上传头像接口
			function mine_avatar_upload(avatar) {

				var image = new Image();
				image.src = document.getElementById("avatar").src;

				//image.onload = function() {
				//alert("选择上传头像-1");
				var img64 = compress(image, 100, 100, 0.7);
				document.getElementById("avatar").src = img64;
				//console.log("压缩后：" + img64.length / 1024);　
				//}
				//alert("选择上传头像");
				var xbx = {}; //登录后的参数对象AES加密
				//console.log(xbx);
				official_login_after(url_host + 'mine/avatar/upload', xbx, 'mine_avatar_upload', avatar);
			}

			//个人资料修改
			function mine_modify(avatar) {
				var xbx = {}; //登录后的参数对象AES加密
				xbx.field_value = avatar; //要修改的字段值
				xbx.field_name = 'avatar'; //要修改的字段名  avatar, real_name

				official_login_after(url_host + 'mine/modify', xbx, 'mine_modify_mine_logo');

			};

			//页面直接这样引用上面的方法：
			function uploadFile(obj) {
				if(obj.value != "上传头像") {
					mine_avatar_upload('avatar');
					//alert("选择上传头像");
				}
			}
		</script>

	</body>

</html>